<script lang="ts" setup>
  defineOptions({ name: 'Drawer' })
  import { ref, watch } from 'vue'

  interface Props {
    title?: string
    size?: string
    visible?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    title: '默认标题',
    size: '40%',
    visible: false,
  })

  const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void
  }>()
  const dialogVisible = ref<boolean>(props.visible)

  // 监听 visible和更新变化
  watch(
    () => props.visible,
    (val) => {
      dialogVisible.value = val
    },
  )
  watch(dialogVisible, (val) => {
    emit('update:visible', val)
  })

  // 关闭抽屉
  function closeDrawer() {
    dialogVisible.value = false
  }
</script>

<template>
  <div>
    <el-drawer v-model="dialogVisible" :title="props.title" :size="props.size" :before-close="closeDrawer">
      <slot name="header"></slot>
      <slot name="default"></slot>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
  :deep(.el-drawer__header) {
    margin-bottom: 0;
  }
</style>
